<template>
  <a-drawer
    :width="340"
    :mask-closable="false"
    :visible="visible"
    unmount-on-close
    :ok-loading="loading"
    @ok="onOk"
    @cancel="close">
    <template #title>
      {{ title }}
    </template>
    <div>
      <a-tree
        v-model:checked-keys="checkedKeys"
        :checkable="true"
        :check-strictly="true"
        :data="authorities"
        :field-names="{
           key: 'id'
        }"
      />
    </div>
  </a-drawer>
</template>

<script>


import useLoading from "@/hooks/loading";
import {listTree} from "@/api/modules/system/authority";
import {allotAuthorities, listAuthorityJoins} from "@/api/modules/system/role";

const { loading, setLoading } = useLoading()
export default {
  name: "AllotAuthority",
  data() {
    return {
      roleId: '',
      visible: false,
      loading,
      title: '分配权限',
      checkedKeys: [],
      authorities: []
    }
  },
  methods: {
    async open(id) {
      this.roleId = id
      const { data } = await listTree()
      const { data: keys } = await listAuthorityJoins(id)
      this.checkedKeys = keys
      this.authorities = data
      this.visible = true
    },
    close() {
      this.visible = false
    },
    async onOk() {
      setLoading(true)
      try {
        await allotAuthorities(this.roleId, this.checkedKeys)
        this.close()
      } finally {
        setLoading(false)
      }
    }
  }
};
</script>

<style scoped>

</style>
